<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>setTimeout模拟分片渲染</title>
</head>
<body>
<ul id="list"></ul>
<script>
    // 理解 requestAnimationFrame 用于在下一次重绘之前执行动画代码的关键在于了解浏览器的渲染机制。
    // 浏览器在显示网页时，会按照一定的频率（通常是每秒 60 次）进行重绘和重排（也称为布局或回流）
    // requestAnimationFrame 正是利用了这一机制，确保动画代码在浏览器的下一个重绘周期之前执行，从而实现平滑的动画效果。
    const listDom = document.getElementById('list');
    let page = 1;
    const total = 10000;
    const pageSize = 10;

    function render(start, end) {
        if (start >= total) return;
        requestAnimationFrame(() => {
            const fragment = document.createDocumentFragment();
            for (let i = start; i < end; i++) {
                const li = document.createElement('li');
                li.innerText = '我是第' + i + '数据';
                fragment.appendChild(li);
            }
            listDom.appendChild(fragment)
            page++
            render((page - 1) * pageSize, page * pageSize)
        })
    }
    render((page - 1) * pageSize, page * pageSize)
</script>
</body>
</html>
